<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>盒子模型</title>
		<style>
			/* 外边距margin属性 ：【微调：文字或者图片】
			margin使用问题1：自适应居中，建议使用div，套块元素、行内块元素、行内元素
			      使用问题2：行元素，上下边距失效  右左外边距
				        行元素：不可以设置高宽【高----不可以上下】，在一行显示【宽---可以左右】
				  使用问题3：垂直外边距
				  使用问题4：垂直外边距
			*/
			img{
				border: 1px solid red;
				/* margin：1个属性值  顺时针 上、右、下、左 */
				margin: 200px;
				/* margin：2个属性值  顺时针 上下、右左 */
				margin: 10px 200px;
				/* 常用：盒子自适应居中 ----失效
				     行内块
				     margin使用问题1：自适应居中  必须设置宽度
				   */
				  width: 200px;
				margin: 0 auto;
				/* margin：3个属性值  顺时针：上、右左、下 */
				margin: 100px 200px 300px;
				/* margin：4个属性值  顺时针：上、右、下、左 */
				margin: 100px 200px 300px 400px;
			}
			h1{
				/*块元素：可以设置高宽、不在一行显示、无法居中，内置文本
				    text-align：center
				*/
				/* 常用：盒子自适应居中 ----失效*/
			    width: 100%;
				border: 1px solid red;
				text-align: center;
			}
			span{/* 常用：盒子自适应居中 ----失效*/
				margin: 0 auto;
				border: 100%;
				margin: auto;
			}
			div{
				width: 200px;
				height: 200px;
				background: red;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<!-- 框模型、盒子模型：四个部分组成
		                     外边距：边框以外四周，叫做外边距
							 margin属性
							 边框：--
							 内边距：边框以内与内容之间的距离，叫做内边距
							 内容： 块、行、行内元素本身宽高
	    所有元素存在于框模型中 -->
		<h1>块级元素</h1>
		<img src="img/圣诞.jpg" width="300px" height="400px" alt="圣诞" />
		<span>行内元素：圣诞</span>
	</body>
</html>